﻿<link href="/SiteUI/Trade/OrderDetail_deliverProcess.css" rel="stylesheet" />
<div id="deliver-process-container">
    <!--待收货发货单-->
    <div class="InfoSection row expand">
        <div class="InfoSectionTitle">
            待收货发货单
            <i class="soicon "></i>
        </div>
        <div class="InfoSectionBody">
            <ul class="table-list" id="wait-list">
                <li class="table-item">
                    <div class="table-head">
                        发货单号：
                        <span>2303984212</span>
                        <a href="javascript:;">查看详情>></a>
                    </div>
                    <div class="table-body"></div>
                    <div class="table-foot">
                        <button class="see-all-btn"></button>
                        <p class="label">
                            <span class="title">发货日期：</span>
                            <span>2016-03-25 09:22</span>
                        </p>
                        <p class="label">
                            <span class="title">发货单状态：</span>
                            <span>待收货</span>
                        </p>
                        <button class="button btn-risky">作废</button>
                    </div>
                </li>
                <li class="table-item">
                    <div class="table-head">
                        发货单号：
                        <span>2303984212</span>
                        <a href="javascript:;">查看详情>></a>
                    </div>
                    <div class="table-body"></div>
                    <div class="table-foot">
                        <button class="see-all-btn"></button>
                        <p class="label">
                            <span class="title">发货日期：</span>
                            <span>2016-03-25 09:22</span>
                        </p>
                        <p class="label">
                            <span class="title">发货单状态：</span>
                            <span>待收货</span>
                        </p>
                        <button class="button btn-risky">作废</button>
                    </div>
                </li>
                <li class="table-item">
                    <div class="table-head">
                        发货单号：
                        <span>2303984212</span>
                        <a href="javascript:;">查看详情>></a>
                    </div>
                    <div class="table-body"></div>
                    <div class="table-foot">
                        <button class="see-all-btn"></button>
                        <p class="label">
                            <span class="title">发货日期：</span>
                            <span>2016-03-25 09:22</span>
                        </p>
                        <p class="label">
                            <span class="title">发货单状态：</span>
                            <span class="status-wait">待收货</span>
                        </p>
                        <button class="button btn-risky">作废</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!--已收货发货单-->
    <div class="InfoSection row expand">
        <div class="InfoSectionTitle">
            已收货发货单
            <i class="soicon "></i>
        </div>
        <div class="InfoSectionBody">
            <ul class="table-list">
                <li class="table-item">
                    <div class="table-head">
                        发货单号：
                        <span>2303984212</span>
                        <a href="javascript:;">查看详情>></a>
                    </div>
                    <div class="table-body"></div>
                    <div class="table-foot">
                        <button class="see-all-btn"></button>
                        <p class="label">
                            <span class="title">发货日期：</span>
                            <span>2016-03-25 09:22</span>
                        </p>
                        <p class="label">
                            <span class="title">发货单状态：</span>
                            <span class="status-receipt">已收货</span>
                        </p>
                        <p class="label">
                            <span class="title">收货日期：</span>
                            <span>2016-03-25 09:22</span>
                        </p>
                        <button class="button btn-risky">作废</button>
                    </div>
                </li>

                <li class="table-item">
                    <div class="table-head">
                        发货单号：
                        <span>2303984212</span>
                        <a href="javascript:;">查看详情>></a>
                    </div>
                    <div class="table-body"></div>
                    <div class="table-foot">
                        <button class="see-all-btn"></button>
                        <p class="label">
                            <span class="title">发货日期：</span>
                            <span>2016-03-25 09:22</span>
                        </p>
                        <p class="label">
                            <span class="title">发货单状态：</span>
                            <span class="status-invalid">已作废</span>
                        </p>
                        <p class="label">
                            <span class="title">收货日期：</span>
                            <span>2016-03-25 09:22</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    $(function () {
        var container = $('#deliver-process-container')//当前操作域
           , delDialog = new LiberUI.Dialoger()
           , delOrderNo = null
           , DEFAULT_ITEM_NUMBER = 5;

        //初始化delDialog
        delDialog.option("MainStyle", "dialog-warn");
        delDialog.Title('作废收货单');
        delDialog.BtnEsc('取消', null, function () { delDialog.hide(); });
        delDialog.BtnEnter('确定', null, function () {
            //删除操作，收货单号存在 delOrderNo变量中
        });

        container.find('.table-list').children().each(function () {
            var deliverBodyTable = new LiberUI.Table()
                , domObject = $(this).find('.table-body').append(deliverBodyTable.Dom)[0];



            domObject.tableObject = deliverBodyTable;
            domObject.tableData = [
                { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
                , { id: '1', invoiceNo: '28831', taxCount: '293819.00', taxRate: '17%', tax: '23819.00', money: '3413.00', date: '2016-01-01', register: '张三', registerDate: '2016-01-01', annex: '0101.png' }
            ];

            deliverBodyTable.Col("序号", "3.67%", false, null, "id", null)
                  .Col("材料编码", "13.11%", false, null, "invoiceNo")
                  .Col("品牌", "13.6%", false, null, "taxCount", null)
                  .Col("名称", "9.31%", false, null, "taxRate", null)
                  .Col("型号", "9.68%", false, null, "tax", null)
                  .Col("规格", "11.15%", false, null, "money", null)
                  .Col("订货", "10.04%", false, null, "date", null)
                  .Col("发货", "10.04%", false, null, "register", null)
                  .Col("实收", "10.04%", false, null, "registerDate", null)
                  .Col("备注", "9.31%", false, null, "annex", null);

        });

        //显示更多事件
        container.find('.see-all-btn').on('click', function () {

            var target = $(this).parent().prev()
               , listData = target[0].tableData;
            if (listData.length > DEFAULT_ITEM_NUMBER && target.find('.gridBody .gridRow').length != DEFAULT_ITEM_NUMBER) {
                var tempArray = [];
                for (var i = 0; i < DEFAULT_ITEM_NUMBER; i++) {
                    tempArray.push(listData[i]);
                }
                target[0].tableObject.vl(tempArray).update();
                $(this).removeClass('show-all');
            } else {
                target[0].tableObject.vl(listData).update();
                $(this).addClass('show-all');
            }
        }).trigger('click');

        //作废收货单
        $('.table-foot .btn-risky').on('click', function () {
            var orderNo = $(this).parent().parent().find('.table-head span').eq(0).vl();
            delDialog.Content($('<p style="width: 420px;">确定作废收货单号为 [' + orderNo + '] 的收货单吗？</p>'));
            delDialog.update().show();
            delOrderNo = orderNo;
        });
    });
</script>